<template>
  <div class="pro-page-header" v-if="display">
    <div class="pro-page-header__wrap">
      <div v-if="title" class="pro-page-header__title" @click="goBack">
        <icons name="icon-return" size="18" />
        <div style="margin-left: 5px; font-size: 16px">{{ title }}</div>
      </div>
      <slot v-else-if="$slots.title" name="title"></slot>
      <n-divider v-if="isDivider" vertical />
      <div v-if="content" class="pro-page-header__content">{{ content }}</div>
      <slot v-else-if="$slots.content" name="content"></slot>
    </div>

    <n-scrollbar
      :style="{ maxHeight: scrollWrapHeight + 'px' }"
      class="page-scroll-wrap"
    >
      <div class="page-scroll-content"><slot></slot></div>
    </n-scrollbar>
  </div>
  <slot v-else></slot>
</template>

<script setup lang="ts">
  const props = defineProps({
    backRouteName: String,
    backRoutePath: String,
    title: {
      type: String,
      default: '返回'
    },
    content: String,
    display: {
      type: Boolean,
      default: true
    }
  })

  const emits = defineEmits(['back'])
  const slots = useSlots()

  const scrollWrapHeight = ref(document.body.clientHeight - 140)

  const goBack = () => {
    if (props.backRouteName) {
      useTabBack({
        name: props.backRouteName
      })
    } else if (props.backRoutePath) {
      useTabBack({
        path: props.backRoutePath
      })
    }
    emits('back')
  }

  const isDivider = computed(() => {
    return (props.title || slots.title) && (props.content || slots.content)
  })

  useWatchScreenResize(() => {
    scrollWrapHeight.value = document.body.clientHeight - 140
  })
</script>

<style lang="less" scoped>
  .pro-page-header {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;

    .pro-page-header__wrap {
      position: relative;
      z-index: 999;
      padding: 12px 20px;
      width: 100%;
      background-color: #ffffff;
      border-top: 1px solid #efeff5;

      display: flex;
      align-items: center;

      box-shadow: 1px 5px 5px rgba(0, 0, 0, 0.05);

      .pro-page-header__title {
        display: flex;
        align-items: center;

        &:hover {
          color: #3ec0d4;
          cursor: pointer;
          fill: #3ec0d4;
        }
      }

      :deep(.n-divider--vertical) {
        margin: 0px 10px;
        background-color: #dedee3;
        height: 1.1em;
      }

      .pro-page-header__content {
        font-size: 17px;
      }
    }

    .page-scroll-wrap {
      max-height: calc(100vh - 170px);

      .page-scroll-content {
        padding: 15px 15px 0px 15px;
      }
    }
  }

  [data-theme='dark'] .pro-page-header__wrap {
    background-color: rgb(24, 24, 28);
    color: #ffffff;
  }
</style>
